<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消费记录工具</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h1><i class="fas fa-wallet"></i> <span id="app-name">智能记账本</span></h1>
                <p class="app-author">by AGI｜林溪</p>
            </div>
            <nav class="sidebar-nav">
                <ul>
                    <li><a href="#" data-view="dashboard" class="nav-link active">
                        <i class="fas fa-chart-pie"></i> 仪表盘
                    </a></li>
                    <li><a href="#" data-view="expenses" class="nav-link">
                        <i class="fas fa-list"></i> 消费记录
                    </a></li>
                    <li><a href="#" data-view="categories" class="nav-link">
                        <i class="fas fa-tags"></i> 分类管理
                    </a></li>
                    <li><a href="#" data-view="reports" class="nav-link">
                        <i class="fas fa-chart-line"></i> 报告分析
                    </a></li>
                    <li><a href="#" data-view="settings" class="nav-link">
                        <i class="fas fa-cog"></i> 设置
                    </a></li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 头部工具栏 -->
            <header class="toolbar">
                <div class="toolbar-left">
                    <h2 id="page-title">仪表盘</h2>
                </div>
                <div class="toolbar-right">
                    <button class="btn btn-primary" id="add-expense-btn">
                        <i class="fas fa-plus"></i> 新增消费
                    </button>
                    <div class="date-filter">
                        <select id="period-filter">
                            <option value="week">本周</option>
                            <option value="month" selected>本月</option>
                            <option value="year">本年</option>
                        </select>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content-area">
                <!-- 仪表盘视图 -->
                <div id="dashboard-view" class="view active">
                    <!-- 每日鼓励 -->
                    <div class="daily-encouragement">
                        <i class="fas fa-quote-left"></i>
                        <span id="daily-quote">今天也要加油哦！合理消费，理性理财！</span>
                        <i class="fas fa-quote-right"></i>
                    </div>
                    <div class="dashboard-grid">
                        <!-- 统计卡片 -->
                        <div class="stats-cards">
                            <div class="stat-card">
                                <div class="stat-icon">
                                    <i class="fas fa-money-bill-wave"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 id="total-expense">¥0.00</h3>
                                    <p>总消费</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">
                                    <i class="fas fa-receipt"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 id="total-records">0</h3>
                                    <p>消费记录</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">
                                    <i class="fas fa-chart-bar"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 id="avg-expense">¥0.00</h3>
                                    <p>平均消费</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">
                                    <i class="fas fa-trophy"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 id="top-category">-</h3>
                                    <p>主要分类</p>
                                </div>
                            </div>
                        </div>

                        <!-- 图表区域 -->
                        <div class="charts-section">
                            <div class="chart-container">
                                <h3>分类统计</h3>
                                <canvas id="category-chart"></canvas>
                            </div>
                            <div class="chart-container">
                                <h3>消费趋势</h3>
                                <canvas id="trend-chart"></canvas>
                            </div>
                        </div>

                        <!-- AI 洞察 -->
                        <div class="ai-insights">
                            <h3><i class="fas fa-brain"></i> AI 洞察</h3>
                            <div id="ai-insights-content">
                                <div class="loading">正在分析消费数据...</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 消费记录视图 -->
                <div id="expenses-view" class="view">
                    <div class="expenses-header">
                        <div class="search-filter">
                            <input type="text" id="search-input" placeholder="搜索消费记录...">
                            <select id="category-filter">
                                <option value="">所有分类</option>
                            </select>
                            <input type="date" id="start-date">
                            <input type="date" id="end-date">
                        </div>
                    </div>
                    <div class="expenses-list">
                        <table id="expenses-table">
                            <thead>
                                <tr>
                                    <th>日期</th>
                                    <th>描述</th>
                                    <th>分类</th>
                                    <th>金额</th>
                                    <th>支付方式</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="expenses-tbody">
                                <!-- 动态生成 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 分类管理视图 -->
                <div id="categories-view" class="view">
                    <div class="categories-header">
                        <button class="btn btn-primary" id="add-category-btn">
                            <i class="fas fa-plus"></i> 新增分类
                        </button>
                    </div>
                    <div class="categories-grid" id="categories-grid">
                        <!-- 动态生成 -->
                    </div>
                </div>

                <!-- 报告分析视图 -->
                <div id="reports-view" class="view">
                    <div class="reports-header">
                        <button class="btn btn-primary" id="generate-report-btn">
                            <i class="fas fa-file-alt"></i> 生成报告
                        </button>
                        <button class="btn btn-secondary" id="export-data-btn">
                            <i class="fas fa-download"></i> 导出数据
                        </button>
                    </div>
                    <div class="report-content">
                        <div id="report-output" class="report-text">
                            <p>点击"生成报告"按钮获取 AI 分析报告</p>
                        </div>
                    </div>
                </div>

                <!-- 设置视图 -->
                <div id="settings-view" class="view">
                    <div class="settings-section">
                        <h3>AI 设置</h3>
                        <div class="setting-item">
                            <label for="api-key">SiliconFlow API Key:</label>
                            <input type="password" id="api-key" placeholder="输入您的 API Key">
                            <button class="btn btn-secondary" id="save-api-key">保存</button>
                        </div>
                    </div>
                    <div class="settings-section">
                        <h3>数据管理</h3>
                        <div class="setting-item">
                            <button class="btn btn-warning" id="clear-cache-btn">清除缓存</button>
                            <button class="btn btn-danger" id="reset-data-btn">重置所有数据</button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 模态框 -->
    <!-- 新增/编辑消费记录模态框 -->
    <div id="expense-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="expense-modal-title">新增消费记录</h3>
                <span class="close" id="expense-modal-close">&times;</span>
            </div>
            <div class="modal-body">
                <form id="expense-form">
                    <div class="form-group">
                        <label for="expense-amount">金额 *</label>
                        <input type="number" id="expense-amount" step="0.01" min="0" required>
                    </div>
                    <div class="form-group">
                        <label for="expense-description">描述 *</label>
                        <input type="text" id="expense-description" required>
                        <div class="ai-suggestion" id="category-suggestion" style="display: none;">
                            <small>AI 建议分类: <span id="suggested-category"></span></small>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="expense-category">分类 *</label>
                        <select id="expense-category" required>
                            <!-- 动态生成 -->
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="expense-date">日期 *</label>
                        <input type="date" id="expense-date" required>
                    </div>
                    <div class="form-group">
                        <label for="expense-payment">支付方式</label>
                        <select id="expense-payment">
                            <option value="cash">现金</option>
                            <option value="card">银行卡</option>
                            <option value="alipay">支付宝</option>
                            <option value="wechat">微信支付</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="expense-notes">备注</label>
                        <textarea id="expense-notes" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="expense-cancel">取消</button>
                <button type="submit" class="btn btn-primary" id="expense-save" form="expense-form">保存</button>
            </div>
        </div>
    </div>

    <!-- 新增分类模态框 -->
    <div id="category-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>新增分类</h3>
                <span class="close" id="category-modal-close">&times;</span>
            </div>
            <div class="modal-body">
                <form id="category-form">
                    <div class="form-group">
                        <label for="category-name">分类名称 *</label>
                        <input type="text" id="category-name" required>
                    </div>
                    <div class="form-group">
                        <label for="category-color">颜色</label>
                        <input type="color" id="category-color" value="#3498db">
                    </div>
                    <div class="form-group">
                        <label for="category-icon">图标</label>
                        <select id="category-icon">
                            <option value="shopping-cart">购物车</option>
                            <option value="utensils">餐具</option>
                            <option value="car">汽车</option>
                            <option value="gamepad">游戏</option>
                            <option value="heartbeat">医疗</option>
                            <option value="graduation-cap">教育</option>
                            <option value="home">住房</option>
                            <option value="ellipsis-h">其他</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="category-cancel">取消</button>
                <button type="submit" class="btn btn-primary" id="category-save" form="category-form">保存</button>
            </div>
        </div>
    </div>

    <!-- 加载指示器 -->
    <div id="loading-overlay" class="loading-overlay" style="display: none;">
        <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <p>处理中...</p>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>